<template>
  <div class="library">
    <!-- <el-button @click="handleGetLibrary"> getLibrary </el-button> -->
    <div v-if="libraryList.length" class="library-box">
      <!-- <el-card shadow="always" v-for="item in libraryList" :key="item">
        {{ item.singername }} - {{ item.songname }}
      </el-card> -->
      <songCard v-for="item in libraryList" 
      :songName="item.songname" :key="item.songid"
      :songId="item.songid"
      :singer="item.singername"
      :albumName="item.albumname"
      :albumId="item.albumid"
      @goToMusic="goToMusic" @likeMusic="likeMusic" @playMusic="playMusic"
      ></songCard>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import songCard from '../components/songCard.vue';

export default {
  name: 'Library',
  components: {
    songCard
  },
  props: {
    currentUserId: { type: Number },
  },
  data() {
    return {
      libraryList: []
    }
  },
  methods: {
    handleGetLibrary() {
      axios({
        method: 'post',
        url: '/api/getLibraryByUserId',
        params: {
          userid: this.currentUserId
        }
      }).then((res) => {
        if (res.data.success) {
          this.libraryList = res.data.data
        }
      })
    },
    goToMusic(songId, albumId) {
      this.$emit('goToMusic', songId, albumId)
    },
    likeMusic(songId) {
      this.$emit('handleLikeMusic', songId)
    },
    playMusic(songId) {
      this.$emit('handlePlayMusic', songId)
    }
  },
  mounted() {
    axios({
        method: 'post',
        url: '/api/getLibraryByUserId',
        params: {
          userid: this.currentUserId
        }
      }).then((res) => {
        this.$nextTick(() => {
          if (res.data.success) {
            this.libraryList = res.data.data
          }
        })
        
      })
  }
}
</script>

<style>
.library {
  /* display: flex; */
  /* flex-direction: column; */
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.library-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
</style>
